<template>
	<view>
		<view class="full" @click="closeFull"></view>

		<view class="login-out">
			<view><b>筛选条件</b></view>
			<u-cell-group>
				<u-field v-model="data_list.code" label="故障编号:" placeholder="请填写"></u-field>
				<u-cell-item title="线路" :value="lineName == '' ? '请选择' : lineName"
					@click="show_picker=true; columns = line_options"></u-cell-item>
				<u-cell-item title="故障地点" :value="stationName == '' ? '请选择' : stationName"
					@click="show_picker=true; columns = station_options"></u-cell-item>
				<u-cell-item title="故障等级" :value="faultLevelName == '' ? '请选择' : faultLevelName"
					@click="show_picker=true; columns = faultLevel_options"></u-cell-item>
			</u-cell-group>
			<view class="work-date" @click="showDate(true)">
				{{ data_list.planStartTime == '' ? '故障开始日期' : data_list.planStartTime }}
				<view class="fr">
					<image src="/static/img/date-icon.png" class="work-date-icon"></image>
				</view>
			</view>
			<view class="work-date" @click="showDate(false)">
				{{ data_list.planEndTime == '' ? '故障结束日期' : data_list.planEndTime }}
				<view class="fr">
					<image src="/static/img/date-icon.png" class="work-date-icon"></image>
				</view>
			</view>

			<view class="clearfix"></view>
			<view class="btn"><button class="cancel-btn" @click="reset"><b>重置</b></button><button class="default-btn fr"
					@click="ok"><b>确定</b></button></view>
		</view>

		<view class="full full2" v-show="show_date || show_picker"></view>
		<u-picker v-model="show_date" mode="time" @confirm="setDate" @cancel="cancel"></u-picker>
		<u-select v-model="show_picker" :list="columns" label-name="text" @confirm="onConfirm" @cancel="cancel">
		</u-select>
	</view>
</template>

<script>
	export default {
		props: ['type'],
		data() {
			return {
				lineName: '',
				line_options: '',
				stationName: '',
				faultLevelName:'',
				station_options: [{
					text: '无数据',
					value: '',
					extra: {
						type: '',
						id: ''
					}
				}],
				faultLevel_options: [{
					text: '一类故障',
					value: '1',
					extra: {
						type: 'faultlevel'
					}
				}, {
					text: '二类故障',
					value: '2',
					extra: {
						type: 'faultlevel'
					}
				}, {
					text: '三类故障',
					value: '3',
					extra: {
						type: 'faultlevel'
					}
				}, {
					text: '四类故障',
					value: '4',
					extra: {
						type: 'faultlevel'
					}
				}],
				columns: [],
				data_list: {
					planStartTime: "",
					planEndTime: "",
					faultLocation: "",
					code: "",
					lineId: "",
					faultLevel: "",
					devicelevel: "",
					owner: "",
					faultIssue: "",
					woState: "",
					pageSize: 15,
					pageNo: 1
				},
				show_picker: false,
				show_date: false
			}
		},
		created() {
			this.data_list.woState = this.type;
			this.initOptions();
		},
		methods: {
			closeFull() {
				this.$emit('closeFull');
			},
			showDate(bol) {
				this.dateType = bol;
				this.show_date = true;
			},
			reset() {
				this.lineName = '';
				this.stationName = '';
				this.station_options = [{
					text: '无数据',
					value: '',
					extra: {
						type: '',
						id: ''
					}
				}];
				this.faultLevelName = ''

				this.data_list = {
					planStartTime: "",
					planEndTime: "",
					faultLocation: "",
					code: "",
					lineId: "",
					faultLevel: "",
					devicelevel: "",
					owner: "",
					faultIssue: "",
					woState: "",
					pageSize: 15,
					pageNo: 1
				};
			},
			cancel() {
				this.show_date = false;
				this.show_picker = false;
			},
			ok() {
				this.$emit('closeFull', this.data_list);
			},
			setDate(obj) {
				let str = obj.year + '-' + obj.month + '-' + obj.day;
				this.dateType ? this.data_list.planStartTime = str : this.data_list.planEndTime = str;
				this.cancel();
			},
			onConfirm(item) {
				if (item[0].extra.type == 'line') {
					this.lineName = item[0].label;
					this.data_list.lineId = item[0].extra.id;
					this.getStationOption(this.data_list.lineId)
				} else if (item[0].extra.type == 'station') {
					this.stationName = item[0].label;
					this.data_list.faultLocation = item[0].extra.id;
				} else if (item[0].extra.type == 'faultlevel') {
					this.faultLevelName = item[0].label;
					this.data_list.faultLevel = item[0].value;
				}
				this.cancel();
			},
			initOptions() {
				this.fetch('GET', this.$store.state.baseFaultUrl + '/kunmingdict/line/name', {
					status: ''
				}, true, this.$store.state.faultCLHeader).then((res) => {
					if (res.success) {
						this.line_options = res.data;
						this.line_options.map((item) => {
							item.extra = {
								type: 'line',
								id: item.id
							};
							item.text = item.name;
						})
					}
				});
			},
			getStationOption() {
				this.fetch('GET', this.$store.state.baseFaultUrl + '/kunmingdict/station/name', {
					lineId: this.data_list.lineId
				}, false, this.$store.state.faultCLHeader).then((res) => {
					if (res.success) {
						this.station_options = res.data;
						this.station_options.map((item) => {
							item.extra = {
								type: 'station',
								id: item.id
							};
							item.text = item.name;
						})
					}
				});
			},
		}
	}
</script>

<style scoped>
	.login-out {
		padding: 26px 0 0 26px;
	}

	.login-out>view:nth-child(1) {
		margin-bottom: 16px;
	}

	.login-out>view:nth-child(2) {
		font-size: 14px;
		margin-bottom: 12px;
	}

	.work-date {
		line-height: 50px;
		border-bottom: 1px solid #d7d7d7;
		color: #3E3A39;
		font-size: 14px;
		padding-right: 27px;
	}

	.work-date-icon {
		width: 15px;
		height: 15px;
		vertical-align: middle;
	}

	.btn {
		position: absolute;
		width: 100%;
		bottom: 5%;
		left: 0;
		padding: 0 15px;
	}

	.default-btn,
	.cancel-btn {
		width: 47%;
		display: inline-block;
	}

	.full2 {
		z-index: 99;
	}

	.login-out>.status {
		line-height: 26px;
		border: 1px solid rgba(62, 58, 57, 0.4);
		padding: 0 13px;
		box-sizing: border-box;
		border-radius: 6px;
		margin-bottom: 16px;
		margin-right: 10px;
		font-size: 12px;
		position: relative;
		color: rgba(62, 58, 57, 0.7);
	}

	.login-out>.on {
		border: 1px solid #307BE0;
		color: #307BE0;
	}

	.login-out>.on::after {
		content: '';
		position: absolute;
		bottom: 0;
		right: -2px;
		background: url('/static/img/alarm-lv.jpg') no-repeat;
		background-size: 100% 100%;
		width: 15px;
		height: 15px;
	}

	.van-cell {
		padding: 15px 16px;
	}

	.van-cell__value {
		color: #000000;
	}
</style>
